<template>
	<view class="content">
		<u-tabs-swiper
			ref="tabs"
			:list="list"
			:current="current"
			bg-color="#1B1B1B"
			inactive-color="#DCDCDC"
			active-color="#D60000"
			@change="tabsChange()"
		></u-tabs-swiper>
		<!-- <view v-if="current == 0"> -->
			<view
				class="ordrNum"
				v-for="(item, index) in all"
				:key="index"
				@click="jumpDetails(item)"
			>
				<view class="top">
					
					<text class="text">订单号：{{ item.number }}</text>
					<text class="text1">{{ item.status }}</text>
				</view>
				<view class="henxian"></view>
				<view class="theFollowing">
					<view class="info">
						<image :src="item.picture" mode="aspectFill"></image>
					</view>
					<view class="info1">
						<view class="list">{{ item.name }}</view>
						<view class="list1">
							<text v-if="item.plate">
								{{ item.plate | hide }}
							</text>
							<text>{{ item.name }}</text>
						</view>
						<view class="list2">
							{{ item.stare_time }} {{ item.day }}
						</view>
						<view class="list3">
							<text class="text">{{ item.status }}</text>
							<text class="text1">￥ {{ item.deposit }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty text="订单为空" mode="order" v-if="all.length==0"></u-empty>
			<u-loadmore :status="status" v-else />
		<!-- </view> -->
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '定金待支付',
					id:0
				},
				{
					name: '租用中',
					id:1
				},
				
				{
					name: '续租中',
					id:3
				},
				
				{
					name: '送车中',
					id:5
				},
				{
					name: '还车中',
					id:6
				},
				
				{
					name: '提前还车',
					id:7
				},
				{
					name: '车辆故障',
					id:8
				},
				{
					name: '订单结束',
					id:9
				},
				{
					name: '退款',
					id:10
				}
			],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			status:0,
			all:[]
			
		};
	},
	onShow() {
		this.ordrLst()
	},
	onLoad() {
		this.ordrLst()
		console.log('111 :>> ');
	},
	methods: {
		
		tabsChange(index) {
			console.log('index :>> ', index);
			if (index >=2 && index< 3) {
				this.current = index;
				this.status = index+1
				this.ordrLst()
			} else if (index >= 3 ) {
				this.current = index;
				this.status = index+2
				//console.log('this.status :>> ', this.status);
				this.ordrLst()
			}else {
				this.current = index;
				this.status = index
				this.ordrLst()
			}
			
		},
		jumpDetails(item){
			var obj ={
				is_status: item.is_status,
				oid:item.id
			}
			
			uni.navigateTo({
				url:'../../pages/order/admOrdr/admOrdr?oid=' + JSON.stringify(obj)
				
			});
		},
		async ordrLst(){
			console.log('this.status :>> ', this.status);
			const res = await this.$u.post("api/user/user_car_order",{status :this.status},);
			console.log("res >>  ", res);
			this.all = res.data
			
		}
		
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	.ordrNum {
		width: 710rpx;
		height: 331rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 37rpx;
		padding: 28rpx 32rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.text {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #737373;
			}
			.text1 {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #d60000;
			}
		}
		.henxian {
			width: 654rpx;
	
			border: 1rpx solid #737373;
			margin-top: 31rpx;
		}
		.theFollowing {
			padding-top: 28rpx;
			display: flex;
			.info {
				width: 184rpx;
				height: 192rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.info1 {
				margin-left: 33rpx;
			}
			.list {
				height: 38rpx;
				line-height: 38rpx;
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #fdfdfd;
			}
			.list1 {
				margin-top: 19rpx;
				text {
					display: inline-block;
					padding: 4rpx 17rpx;
					//line-height: 31rpx;
					text-align: center;
					background: #dcdcdc;
					border-radius: 16rpx;
					margin-right: 10rpx;
	
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #1e2024;
				}
			}
			.list2 {
				margin-top: 20rpx;
	
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
			}
			.list3 {
				margin-top: 10rpx;
				.text {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
				}
				.text1 {
					margin-left: 30rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #d60000;
				}
			}
		}
	}
	
	
}
</style>
